<template>
    <grid-layout
        ref="content"
        :layout="gridItemConfig"
        :col-num="24"
        :row-height="rowHeight"
        :responsive="true" 
        :is-draggable="true"
        :is-resizable="true"
        :is-mirrored="false"
        :vertical-compact="true"
        :margin="[0,0]"
        :use-css-transforms="true"
        style="height: 100%; background: #f5f5f5;overflow-x: hidden;"
    >
        <grid-item v-for="item in gridItemConfig"
                :x="item.x"
                :y="item.y"
                :w="item.w"
                :h="item.h"
                :i="item.i"
                :key="item.i"
                :static="staticGrid"
                @moved="movedEvent"
                @resized="resizedEvent"
                @container-resized="resizeContainer">
                    <custom-components style="padding: 10px" :ref="'customComponents_'+item.i" :config="item.config" :shared="shared" :fullSceenAbled="fullSceenAbled" :staticComponent="staticGrid" @clickSetting="clickSetting" @delete="deleteComponent"></custom-components>
        </grid-item>
    </grid-layout>
    
</template>

<script>
import VueGridLayout from 'vue-grid-layout';
import customComponents from './components/container.vue'
export default {
    components: {
           GridLayout: VueGridLayout.GridLayout,
           GridItem: VueGridLayout.GridItem,
           customComponents
       },
    props: {'gridItemConfig': Object, staticGrid:Boolean, fullSceenAbled: {type: Boolean, default: true}, shared: {type: Boolean, default: false}},
    data () {
        return {
            rowHeight: 30
        }
    },
    computed:{
        gConfig: {
            get(){
                return JSON.parse(JSON.stringify(this.$props.gridItemConfig))
            },
            set(){}
        }
    },
    methods:{
        clickSetting(config){
            this.$emit('clickSetting', config)
        },
        deleteComponent(config){
            this.$emit('delete', config)
        },
        movedEvent(){
        },
        resizedEvent(i, newH, newW, newHPx, newWPx){
            this.$refs['customComponents_'+i][0].resize(newHPx, newWPx)
        },
        getGridItemConfig(){
            return this.$props.gridItemConfig
        },
        resize(){
            this.rowHeight = parseInt((this.$refs.content.$el.clientHeight) / 24)
        },
        resizeContainer(i, newH, newW, newHPx, newWPx){
            this.$nextTick(() => {
                this.$refs['customComponents_'+i][0].resize(newHPx, newWPx)
            })
        }
    },
    mounted(){
        this.$nextTick(() => {
            this.$nextTick(() => {
                this.rowHeight = parseInt((this.$refs.content.$el.clientHeight) / 24)
            })
        })
    }
}
</script>

<style scoped>


</style>
<style>
</style>
